﻿@model EmployeeApp.Web.Models.Employee.EmployeeModel
@{
    ViewBag.Title = "View Employee Detail";
}

@section Styles {
    <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui-1.8.20.js")" type="text/ecmascript"></script>
    <link href="@Url.Content("~/Content/themes/base/jquery.ui.all.css")" rel="stylesheet" />
    <link href="@Url.Content("~/Content/themes/base/jquery-ui.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/themes/base/jquery.ui.datepicker.css")" rel="stylesheet" type="text/css" />

    <script type="text/javascript">
        $(function() {
            $.datepicker.setDefaults( $.datepicker.regional[ "th" ] );
            $( "#BirthDate" ).datepicker({
                buttonImage: '../../images/datepicker.png',
                changeMonth: true, changeYear: true,
                defaultDate: new Date(),
                maxDate: new Date(),
                yearRange: 'c-70:c',
                minDate: '-71Y'
            });
        });
        
    </script>
}

<h2>Employee Detail</h2>


@using (Html.BeginForm("Update", "Employee", FormMethod.Post, new { @id = "form-employee" }))
{
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>EmployeeModel</legend>
        <div class="two-column-container">
            <div class="texteditor">
                @Html.LabelFor(model => model.EmpId)
                @Html.TextBoxFor(model => model.EmpId)
                @Html.ValidationMessageFor(model => model.EmpId)
                @Html.HiddenFor(model => model.Id)
                <input type="hidden" name="Mode" value="Edit" />
                <input type="hidden" name="OldValue" value="@(Model.EmpId == null ? "" : Model.EmpId )" />
            </div>

            <div class="texteditor">
                @Html.LabelFor(model => model.Title)
                @Html.RadioButtonFor(model => model.Title, "1") Mr.
                @Html.RadioButtonFor(model => model.Title, "2") Miss.
                @Html.RadioButtonFor(model => model.Title, "3") Mrs.
                @Html.ValidationMessageFor(model => model.Title)
            </div>
        </div>

        <div class="two-column-container">
            <div class="texteditor">
                @Html.LabelFor(model => model.Name)
                @Html.TextBoxFor(model => model.Name)
                @Html.ValidationMessageFor(model => model.Name)
            </div>

            <div class="texteditor">
                @Html.LabelFor(model => model.Surname)
                @Html.TextBoxFor(model => model.Surname)
                @Html.ValidationMessageFor(model => model.Surname)
            </div>
        </div>

        <div class="two-column-container">
            <div class="texteditor">
                @{var listItems = new List<System.Web.UI.WebControls.ListItem> 
                { 
                      new System.Web.UI.WebControls.ListItem { Text = "Programmer", Value = "1" },
                      new System.Web.UI.WebControls.ListItem { Text = "Programmer Analyst", Value = "2" }, 
                      new System.Web.UI.WebControls.ListItem { Text = "System Analyst", Value = "3" } 
                };
                }

                @Html.LabelFor(model => model.JobTitle)
                @Html.DropDownListFor(model => model.JobTitle, new SelectList(listItems, "Value", "Text"))
                @Html.ValidationMessageFor(model => model.JobTitle)

            </div>

            <div class="texteditor">
                @Html.LabelFor(model => model.Status)
                @Html.RadioButtonFor(model => model.Status, "1") Active
                @Html.RadioButtonFor(model => model.Status, "2") InActive
                @Html.ValidationMessageFor(model => model.Status)
            </div>
        </div>

        <div class="two-column-container">
            <div class="texteditor">
                @Html.LabelFor(model => model.MarriedStatus)
                @Html.RadioButtonFor(model => model.MarriedStatus, "1") Single
                @Html.RadioButtonFor(model => model.MarriedStatus, "2") Married
                @Html.ValidationMessageFor(model => model.MarriedStatus)
            </div>

            <div class="texteditor">
                @Html.LabelFor(model => model.BirthDate)
                @Html.EditorFor(model => model.BirthDate, new { @readonly="readonly" })
                @Html.ValidationMessageFor(model => model.BirthDate)
            </div>
        </div>
        <div class="two-column-container">
            <div class="texteditor">
                @Html.LabelFor(model => model.Address)
                @Html.TextAreaFor(model => model.Address)
                @Html.ValidationMessageFor(model => model.Address)
            </div>
        </div>
        <div class="bottom-menu clear">
            <input type="button" name="btnBack" value="Cancel" id="button-back" onclick="location.href='@Url.Action("ListEmployee", "Employee")    '"/>
            <input type="Button" value="Save" id="button-save" onclick="JavaScript: SaveButtonClick()" />
            <input type="button" name="btnDelete" value="Delete" id="button-delete" onclick="JavaScript: DeleteButtonClick()" />
        </div>
    </fieldset>
}

<div id="confirm-delete" title="Confirm delete." style="display: none">
    <span>Do you want to delete?</span>
</div>

<div id="confirm-save" title="Confirm save." style="display: none">
    <span>Do you want to save?</span>
</div>

<script type="text/javascript">
    function DeleteButtonClick() {
        $("#confirm-delete").dialog({
            modal:true,
            buttons: {
                Yes: function () {
                    $(this).dialog("close");

                    $.post('@Url.Action("DeleteEmployeeById", "Employee")',$("#form-employee").serialize(),function (data) {
                        if (data == "Success") {
                            window.location.href = '@Url.Action("ListEmployee", "Employee")';
                        }                        
                    });

                },
                No:function(){
                    $(this).dialog("close");
                }
            }
        })
    }

    function SaveButtonClick() {
        $("#confirm-save").dialog({
            modal: true,
            buttons: {
                Yes: function () {
                    $(this).dialog("close");
                    $("#form-employee").submit();
                },
                No: function () {
                    $(this).dialog("close");
                }
            }
        })
    }
</script>
